<!-- 已放好客户 -->
<template>
  <div class="already-put">
    <!-- 查询 -->
    <el-date-picker
      size="mini"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
    <div class="oper">
      <el-button type="primary" size="mini">查询</el-button>
      <el-button size="mini">清空</el-button>
    </div>
    <!-- 列表 -->
    <div class="list">
      <span class="no-data" v-if="!list.length">暂无数据</span>
      <el-row :gutter="15">
        <el-col :span="6"  v-for="(item, index) in 40" :key="index">
          <div class="item">
            {{index+1}}、<el-button circle icon="el-icon-printer" size="mini"></el-button>
            <a>标题(2/9)</a>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    }
  }
}
</script>

<style lang="less">
  .list{
    padding: 0 10px 10px 10px;
    margin-top: 10px;
    border: 1px solid #dcdfe6;
    min-height: 300px;
    position: relative;
    .item{
      margin-top: 10px;
      display: inline-block;
      a{
        color: #409EFF;
      }
    }
    .no-data{
      font-size: 14px;
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%,-50%);
      transform: translate(-50%,-50%);
      color: #909399;
    }
  }
  .oper{
    display: inline-block;
    margin-left: 30px;
  }
</style>
